<template>
<div id="out32">
    <div class="top">
    	    <a href="#/GeRenzx3">
        <img src="../assets/img/duanhuowang/zuojiantou.png" alt=""/>
        </a>
        <span class="myzu">我的足迹</span>
        <span class="qingkong">清空</span>
        <span class="bj">编辑</span>
    </div>
    <div class="back"></div>
    <ul class="ul">
	    	<li>
	    		<p>2017-07-03</p>
	    		<div>
	    			<span></span>
	    			<img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    			<div>
	    				<p class="tittlea">焕彩璀璨花心唇彩4.8g</p>
	    				<p>
	    					<span><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    					<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
	    					海外直邮
	    				</p>
	    				<p class="pric">￥166.06</p>
	    			</div>
	    		</div>
	    	</li>
	    	<li>
	    		<p>2017-07-09</p>
	    		<div>
	    			<span></span>
	    			<img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    			<div>
	    				<p class="tittlea">焕彩璀璨花心唇彩4.8g</p>
	    				<p>
	    					<span><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    					<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
	    					海外直邮
	    				</p>
	    				<p class="pric">￥166.06</p>
	    			</div>
	    		</div>
	    	</li>
	    	<li>
	    		<div>
	    			<span></span>
	    			<img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    			<div>
	    				<p class="tittlea">焕彩璀璨花心唇彩4.8g</p>
	    				<p>
	    					<span><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    					<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
	    					海外直邮
	    				</p>
	    				<p class="pric">￥166.06</p>
	    			</div>
	    		</div>
	    	</li>
	    	<li>
	    		<div>
	    			<span></span>
	    			<img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    			<div>
	    				<p class="tittlea">焕彩璀璨花心唇彩4.8g</p>
	    				<p>
	    					<span><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    					<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
	    					海外直邮
	    				</p>
	    				<p class="pric">￥166.06</p>
	    			</div>
	    		</div>
	    	</li>
    </ul>
    <div class="backAlert">
    	    <div>
    	    	     <p>确定要清空所有👣吗？</p>
    	    	     <span>取消</span>
    	    	     <span>确定</span>
    	    </div>
    </div>
    <div class="bottom7">
    	    <span></span>
    	    <span>全选</span>
    	    <div>删除</div>
    </div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var v=0;
				for(var i=0; i<$("#out32>.ul>li").length; i++){
				    if(i>1){
				    	    $("#out32>.ul>li>div>div").eq(i).css("border-bottom","none");
				    };
				};
				$("#out32>.top>.qingkong").click(function(){
					$("#out32>.backAlert").fadeIn(500);
				});
				$("#out32>.backAlert>div>span").eq(0).click(function(){
					$(this).parent().parent().fadeOut(500);
				});
				$("#out32>.backAlert>div>span").eq(1).click(function(){
					$(this).parent().parent().fadeOut(500);
					$("#out32>.ul").remove();
				});
				$("#out32>.ul>li>div>span").attr("check",false);
				$("#out32>.bottom7>span").eq(0).attr("check",false);
				$("#out32>.top>.bj").attr("check",false);
				$("#out32>.ul>li>div>span").click(function(){
					if ($(this).attr("check")=="false") {
						$(this).attr("check",true);
					} else if($(this).attr("check")=="true"){
						$(this).attr("check",false);
					};
					duiHao();
					if (v>=$("#out32>.ul>li>div>span").length) {
						$("#out32>.bottom7>span").eq(0).attr("check",true).addClass("activeS");
					};
					if(v<$("#out32>.ul>li>div>span").length){
						$("#out32>.bottom7>span").eq(0).attr("check",false).removeClass("activeS");
					};
				});
				$("#out32>.bottom7>span").eq(0).click(function(){
					if ($(this).attr("check")=="false") {
						$(this).attr("check",true).addClass("activeS");
					} else if($(this).attr("check")=="true"){
						$(this).attr("check",false).removeClass("activeS");
					};	
					$("#out32>.ul>li>div>span").attr("check",$("#out32>.bottom7>span").eq(0).attr("check")==="false"?false:true);
					duiHao();
				});
				$("#out32>.bottom7>div").click(function(){
					shanChu();
				});
				$("#out32>.top>.bj").click(function(){
					if ($(this).attr("check")=="false") {
						$(this).attr("check",true);
					} else if($(this).attr("check")=="true"){
						$(this).attr("check",false);
					};
					if ($(this).attr("check")=="true") {
				         $("#out32>.bottom7").fadeIn(500);
				         $("#out32>.ul>li>div>span").fadeIn(500);
				    } else if($(this).attr("check")=="false"){
				         $("#out32>.bottom7").fadeOut(500);
				         $("#out32>.ul>li>div>span").fadeOut(500);
				    };
				});
				function duiHao(){
					 v=0;
				    for (var i = 0; i < $("#out32>.ul>li>div>span").length; i++) {
				         if ($("#out32>.ul>li>div>span").eq(i).attr("check")=="true") {
				         	$("#out32>.ul>li>div>span").eq(i).addClass("activeS");
				         	v++;
				         } else if($("#out32>.ul>li>div>span").eq(i).attr("check")=="false"){
				         	$("#out32>.ul>li>div>span").eq(i).removeClass("activeS");
				         };
				    };	
				};
				function shanChu(){
				    	for (var i = 0; i < $("#out32>.ul>li>div>span").length; i++) {
				         if ($("#out32>.ul>li>div>span").eq(i).attr("check")=="true") {
				         	$("#out32>.ul>li").eq(i).slideUp(500,function(){
				         		$(this).remove();
				         	});
				         };
				    };
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out32{
		height: 100vh;
		background-color: #f2f2f2;
	}
	#out32>.back{
		height: 9.6rem;
	}
	#out32>.top{
		height: 9.6rem;
		width: 100vw;
		background-color: #e53e42;
		color: #FFFFFF;
		font-size: 3rem;
		box-sizing: border-box;
		padding: 3rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
	}
	#out32>.top img{
		width: 2.3rem;
		height: 3.8rem;
	}
	#out32>.top>span{
		padding-left: 1rem;
	}
	#out32>.top>.myzu{
		font-size: 3.6rem;
		width: 48rem;
		text-align: right;
		box-sizing: border-box;
		padding-right: 12rem;
	}
	#out32>.ul{
		padding: 2rem;
		background: #FFFFFF;
		box-sizing: border-box;
		padding-right: 0;
	}
	#out32>.ul>li>p{
		color: #4d4d4d;
		font-size: 2.8rem;
		padding-bottom: 2rem;
	}
	#out32>.ul>li>div{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		height: 20rem;
	}
	#out32>.ul>li>div>img{
		width: 7rem;
		height: 15rem;
		margin-left: 6rem;
	}
	#out32>.ul>li>div>div{
		width: 53rem;
		height: 20rem;
		box-sizing: border-box;
		padding-top: 2rem;
		color: #4d4d4d;
		margin-left: 6rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out32>.ul>li>div>div>p{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 2.4rem;
	}
	#out32>.ul>li>div>div>.tittlea{
		color: #4d4d4d;
		font-size: 2.8rem;
		padding-bottom: 3rem;
	}
	#out32>.ul>li>div>div>.pric{
		font-size: 3rem;
		color: #e53e42;
		padding-top: 3rem;
	}
	#out32>.ul>li>div>div>p>img{
		width: 3.4rem;
		height: 3.3rem;
		margin-right: 1.5rem;
	}
	#out32>.ul>li>div>div>p>span{
		width: 3rem;
		height: 2rem;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		font-size: 0;
		margin-right: 1.5rem;
	}
	#out32>.ul>li>div>div>p>span>img{
		width: 1rem;
		height: 1rem;
		margin-top: 0.5rem;
	}
	#out32>.backAlert{
		position: fixed;
		top: 0;
		background: rgba(0,0,0,.3);
		width: 100vw;
		height: 100vh;
		z-index: 50;
		display: none;
	}
	#out32>.backAlert>div{
		width: 40rem;
		height: 25rem;
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -20rem;
		margin-top: -12.5rem;
	}
	#out32>.backAlert>div>p{
		color: #4d4d4d;
		font-size: 3rem;
		text-align: center;
		padding: 6rem 0;
	}
	#out32>.backAlert>div>span{
		display: inline-block;
		width: 19rem;
		height: 10rem;
		text-align: center;
		line-height: 6rem;
		font-size: 2.8rem;
		margin-top: 1.9rem;
		margin-left: 0.5rem;
		color: #4d4d4d;
	}
	#out32>.backAlert>div>span:last-child{
		color: #e53e42;
	}
	#out32>.ul>li>div>span{
		width: 3rem;
		height: 3rem;
		border: 0.1rem solid #000000;
		border-radius: 50%;
		display: none;
		box-sizing: border-box;
	}
	#out32>.ul>li>div>span.activeS{
		background: url(../assets/img/fenlei/dui.png) no-repeat;
		background-size: 100% 100%;
		border: none;
	}
	#out32>.bottom7{
		padding: 2rem;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		width: 100vw;
		box-sizing: border-box;
		display: none;
	}
	#out32>.bottom7>span{
		float: left;
		font-size: 3rem;
	}
	#out32>.bottom7>span:first-child{
		width: 3rem;
		height: 3rem;
		border: 0.1rem solid #000000;
		border-radius: 50%;
		margin-right: 2rem;
		box-sizing: border-box;
	}
	#out32>.bottom7>.activeS:first-child{
		background: url(../assets/img/fenlei/dui.png) no-repeat;
		background-size: 100% 100%;
		border: none;
	}
	#out32>.bottom7>div{
		float: right;
		font-size: 3rem;
		width: 12rem;
		height: 4rem;
		background-color: #e53e42;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		color: #FFFFFF;
	}
</style>